<template>
  <section class="cms-body flex">

    <!-- 树组件 -->
    <cms-tree @change="getChannelId" :hasContent='true'></cms-tree>

    <div class="cms-content-right">
      <div class="cms-list-header clearfix flex">
        <div class="bread-box cms-left">
          <label class="">当前频道:</label>
          <ul class="type-bread">
            <li class="bread-items" v-for="(item,index) in breadItems" :key="index">
              <a href="javascript:void(0)" @click="clickBread(item.id,index)">{{item.name}}</a>
            </li>
          </ul>
        </div>
      </div>

      <div class="cms-list-header clearfix flex" style="padding:0 24px 16px 24px;flex-wrap:wrap">
        <div style="margin-top:16px;flex:auto">

          <!-- 所有类型 -->
          <el-select class="cms-left" placeholder="所有类型" v-model="params.typeId" @change="query"
                     style="width:120px">
            <el-option label="所有类型" value=""></el-option>
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>

          <!-- 排序方式 -->
          <el-select v-model="params.orderBy" style="width: 160px;" @change="query">
            <el-option label="ID降序" value="0"></el-option>
            <el-option label="ID升序" value="1"></el-option>
            <el-option label="发布时间降" value="2"></el-option>
            <el-option label="发布时间升" value="3"></el-option>
            <el-option label="推荐置顶降,发布降" value="4"></el-option>
            <el-option label="推荐置顶降,发布升" value="5"></el-option>
            <el-option label="内容状态升,发布降" value="6"></el-option>
          </el-select>
        </div>
        <div style="margin-top:16px;flex:auto" class="content-flex-right">
          <cms-input label="标题" v-model="params.title"></cms-input>
          <cms-input label="编辑" v-model="params.userName"></cms-input>
          <cms-input label="责编" v-model="params.checkUserName"></cms-input>
          <el-button @click="query">查询</el-button>
        </div>
      </div>

      <el-table :data="tableData" stripe highlight-current-row @current-change="currentChange" v-loading="loading">
        <!-- <el-table-column type="selection" width="35" align="center"></el-table-column>-->
        <el-table-column prop="id" label="id" width="55" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" align="left" min-width="100px">
          <div slot-scope="scope">
            <span class="cms-channel-name" style="color: #999;">[{{scope.row.channelName}}]</span>
            <!--  <a class="link" :href="scope.row.url" :title="scope.row.title" target="_blank">-->
            {{scope.row.title}}
            <!--</a>-->
          </div>
        </el-table-column>
        <!--类型 -->
        <el-table-column label="类型" prop="typeName" align="center" width="50"></el-table-column>
        <!--编辑 -->
        <el-table-column label="编辑" prop="userName" align="center" width="75"></el-table-column>
        <!--责编 -->
        <el-table-column label="责编" prop="checkUserName" align="center" width="75"></el-table-column>
        <!--创建时间 -->
        <el-table-column label="编辑时间" prop="updateTime" align="center" width="120"></el-table-column>
        <!--状态 -->
        <el-table-column label="状态" prop="status" align="center" width="65">
          <div slot-scope="scope">
            <span v-if="scope.row.status==0">草稿</span>
            <span v-if="scope.row.status==1">待签发</span>
            <span v-if="scope.row.status==2">已签发</span>
            <span v-if="scope.row.status==3">回收站</span>
          </div>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <div slot-scope="scope">


            <a href="javascript:void(0)" @click="deleteBatch($api.contentCycleDelete,scope.row.id)">
              删除
            </a>
            &nbsp;&nbsp;
            <a href="javascript:void(0)" @click="reduction2(scope.row)">
              还原
            </a>
          </div>
        </el-table-column>

      </el-table>
      <!-- 表格底部 -->
    <div class="cms-list-footer" style="padding-bottom:100px;">
        <!--<div class="cms-left">
          <el-button :disabled="disabled" @click="deleteBatch($api.contentCycleDelete,ids)"
                     v-perms="'/contentCycle/delete'">批量删除
          </el-button>
          <el-button :disabled="disabled" @click="reduction()" v-perms="'/contentCycle/recycle'">批量还原</el-button>
        </div>-->
        <cms-pagination :total="total" @change="getPages"></cms-pagination>
      </div>

    </div>
  </section>
</template>

<script>
  import listMixins from '@/mixins/list'
  import axios from 'axios/index'

  export default {
    mixins: [listMixins],
    data() {
      return {
        params: {
          title: '',
          status: '3',
          typeId: '',
          topLevel: false,
          channelTopLevel: false,
          userName: '',
          checkUserName: '',
          recommend: false,
          isCycle: true,
          orderBy: '6',
          channelId: '',
          isRecommendSlider: '',
          isChannelSlider: '',
          pageNo: 1,
          pageSize: 10
        },
        allTotal: 0, //分页总数
        breadItems: [
          {
            name: '根目录',
            id: ''
          }
        ], //面包屑
        modelList: {}, //当前频道信息
        typeList: [], //内容类型接口
        topicList: [], //专题列表
        currentCheckChannelId: 0, //当前选中频道
        topicIds: [], //选中的专题数组
        pushSites: [],
        props: {
          label: 'name',
          children: 'zones',
          isLeaf: 'isChild',
          id: 'id'
        },
        operateType: '',
        tableHeight: 500,
      }
    },
    methods: {
      getChannelId(data, node) {
        //获取频道树点击
        this.creatBread(node, []);
        this.params.channelId = data.id;//传递频道id
        this.params.modelId = data.modelId;//传递模型id
        this.getChannelInfo(data.id); //获取频道信息
        this.getTableData(this.params); //获取内容信息
      },
      creatBread(node, arr) {
        if (node.parent != null) {
          let params = {
            name: node.data.name,
            id: node.data.id
          }
          arr.push(params)
          this.creatBread(node.parent, arr)
        } else {
          this.breadItems = arr.reverse()
          return false;
        }
      },
      getChannelInfo(channelId) {
        //获取模型信息
        let modelList = [];
        axios.post(this.$api.modelList, {containDisabled: false, hasContent: true}).then(res => {
          if (res.code == '200') {
            modelList = res.body //获取模型
          }
          if (channelId != '' && channelId != undefined) {
            axios.post(this.$api.channelGet, {id: channelId, showTxt: false}).then(res => {
              if (res.body.selfModels.length > 0) {
                this.modelList = res.body.models; //获取模型
              } else {
                this.modelList = modelList;
              }
            })
          } else {
            this.modelList = modelList;
          }
        })
      },
      reduction() {
        this.$confirm('你确定要还原?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
          this.$message({
            actions: this.goReduction(this.$api.viewNewsBatchRemoveRecycle, 0),
            type: 'success',
            message: '还原成功!',
          });
        }).catch(() => {
          this.$message({type: 'info', message: '已取消还原'});
        });
      },
      reduction2(row) {
        this.checkedList.push(row);
        this.$confirm('你确定要还原?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
          this.$message({
            actions: this.goReduction(this.$api.viewNewsBatchRemoveRecycle, 0),
            type: 'success',
            message: '还原成功!',
          });
        }).catch(() => {
          this.$message({type: 'info', message: '已取消还原'});
        });
      },
      goReduction(url, status) {
        let params = [];
        let checkedList = this.checkedList;
        for (let i in checkedList) {
          let param = checkedList[i];
          console.log(param)
          param['contentId'] = param.id;
          param['status'] = status;
          params.push(param)
        }
        params = JSON.stringify(params);
        this.$http.post(url, {params: params, optType: 9}).then(res => {
          if (res.code == "200") {
            this.getTableData(this.params);
          }
        });
      },
      query() {
        this.params.pageNo = 1;
        this.getTableData(this.params);
      },
      currentChange(row) {
        let ids = [];
        ids.push(row.id);
        this.ids = ids.join(",");
        this.disabled = val.length > 0 ? false : true;
        this.checkedList = [row];
      },
      getTypeList() {
        axios.post(this.$api.typeList, {containDisabled: false}).then(res => {
          if (res.code == '200') {
            this.typeList = res.body;
          }
        })
      },
    },
    created() {
      this.$store.dispatch('setCollapse', false) //收缩状态栏
      if (this.$route.query.type == 'list') {
        if (this.$route.query.id == 0) {
          this.params.channelId = ''
        } else {
          this.params.channelId = this.$route.query.id;
        }
      }
      this.initTableData(this.$api.viewNewsPageList, this.params) //请求列表
      this.getChannelInfo() //模型列表
      this.getTypeList() //内容类型
    }
    ,
    mounted() {
      let clientHeight = document.body.clientHeight
      $('.cms-body').css('minHeight', clientHeight - 110 + 'px')
    }
  }
</script>

<style>
  .bread-box {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
  }

  .bread-box label {
    color: #5a5e66;
    font-size: 14px;
  }

  .type-bread {
    margin-right: 12px;
  }

  .bread-items {
    display: inline-block;
  }

  .bread-items a {
    color: #1276c3;
    font-size: 14px;
  }

  .bread-items a::after {
    content: '/';
    padding: 0 5px;
    color: #1276c3;
  }

  .bread-items:last-child a::after {
    content: '';
    padding: 0 5px;
    color: #1276c3;
  }

</style>
